<template>
  <div class="div1">
    <div>客服电话： 028-0225-2256</div>
    <div>
      <a href="#">登陆 |</a>
      <a href="#"> 注册 |</a>
      <a href="#"> 我的订单 |</a>
      <a href="#"> 连系我们</a>
    </div>
  </div>

  <div style="width: 80%;margin: auto">
    <div style="display:flex;justify-content: space-around">
      <div>
        <div class="heart"></div>
        <p style="margin-left: -50px;font-size: 26px"><span class="span">LOVO</span></p>
      </div>
      <div style="width: 400px;margin-top: 30px">
        <el-steps :active="active" finish-status="success">
          <el-step title="加入购物车"></el-step>
          <el-step title="立即下单"></el-step>
          <el-step title="确认订单"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="div2">
      <div style="background-color: #f7f7f7;display: flex;">
        <el-result icon="success" style="padding: 10px"></el-result>
        <div>
         <p style="font-size: 22px">订单提交成功！</p>
          <p>订单编号：{{orderNumber}} &nbsp;&nbsp;|&nbsp;&nbsp;下单时间：{{createDate}} &nbsp;&nbsp;<span style="color:red;font-size: 14px">(如果48小时未付款,订单会自动取消)</span></p>
        </div>
        <div style="margin-top: 20px;margin-left:450px">
          <p>应付金额:&nbsp;&nbsp;<span style="color: red">￥</span><span style="font-size: 32px;color: red">{{totalPrice}}</span></p>
        </div>
      </div>

    </div>

    <div class="div2">
      <span class="span">在线支付</span>
      <el-radio-group v-model="checkboxGroup1">
        <el-radio-button  style="width: 150px" size="large"  v-for="city in cities" :label="city.value" :key="city.key" @click="aaaa(city.key)"></el-radio-button>
      </el-radio-group>
    </div>

    <div class="div3" style="display: flex;height: 100px" >
      <div v-if="show">
        <span class="span">余额支付</span>
        <div>
          {{error}}<br>
          <el-input type="password" v-model="input" style="width: 200px" placeholder="请输入密码" ></el-input> <span>余额：&nbsp;&nbsp;￥{{balance}}</span>
          <div style="display:flex ;align-items: flex-end"><el-button type="danger" style="width: 200px ;margin-top: 20px">立即支付</el-button><a href="#">忘记密码</a></div>
        </div>
      </div>
      <div style="margin-top: 20px;display: flex;justify-content: flex-end">
        <el-button v-if="show2" style="width: 200px;margin-left: 1100px" type="danger">立即支付</el-button>
      </div>
    </div>


    <div style="position: relative;top: 100px" >
        <el-image :src="src" style="width: 100%; height: 100px"></el-image>
    </div>
  </div>


</template>

<script>
const cityOptions = [{key:0,value:"预存款支付"},{key:1,value:"支付宝"}];
export default {
  data() {
    return {
      src:require("../../../public/5.png"),
      show2:false,
      show:true,
      balance:1231,
      error:'',
      input:'',
      totalPrice:1224,
      active: 3,
      orderNumber:"dddd",
      createDate:"dddd",
      cities: cityOptions,
      checkboxGroup1: '预存款支付',
    }
  },
  methods:{
    aaaa(key){
      this.show = true
      this.show2 = false
     if (key===1){
       this.show = false
       this.show2 = true
     }
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #909399;
  font-size: 14px;
  margin-left: 10px;
}
.span {
  margin-right: 30px;
  font-size: 22px;
}

.div2 {
  padding: 30px 0;
  border-bottom: 1px solid #909399;
}
.div3 {
  padding: 30px 0;
}

.div1 {
  margin: 15px 0 0 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background-color: red;
  color: white;
}

.div1 a {
  color: white;
  text-decoration: none;
}

.heart {
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(45deg) scale(.5);
  animation-name: hd;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position: absolute;
  top: 68px;
  left: 200px;
}

.heart::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateX(-10px);
}

.heart::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateY(-10px);
}

@keyframes hd {
  25% {
    transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(.5);
  }
  75% {
    transform: rotate(45deg) scale(1);
  }
  to {
    transform: rotate(45deg) scale(.5);
  }
}
</style>